<template>
    <div class="page-container">
        <div class="page-card">
          <div class="table-filter">
            <div class="filter-left">

              <div class="filter-row">
                <div class="row-title">报备状态：</div>
                <div class="row-content">
                  <div v-for="(item,index) in filters1" :key="index" class="row-checkbox">
                    <a-checkbox>
                      {{ item.title }}
                    </a-checkbox>
                  </div>
                </div>
              </div>

              <div class="filter-row">
                <div class="row-title">项目类型：</div>
                <div class="row-content">
                  <div v-for="(item,index) in filters2" :key="index" class="row-checkbox">
                    <a-checkbox>
                      {{ item.title }}
                    </a-checkbox>
                  </div>
                </div>
              </div>

              <div class="filter-row">
                <div class="row-title">相关客户：</div>
                <div class="row-content">
                  <div class="row-select">
                    <a-select
                        show-search
                        placeholder="选择相关客户"
                        option-filter-prop="children"
                    >
                      <a-select-option value="jack">
                        Jack
                      </a-select-option>
                      <a-select-option value="lucy">
                        Lucy
                      </a-select-option>
                      <a-select-option value="tom">
                        Tom
                      </a-select-option>
                    </a-select>
                  </div>
                </div>
              </div>

              <div class="filter-row">
                <div class="row-title">关联项目：</div>
                <div class="row-content">
                  <div class="row-select">
                    <a-select
                        show-search
                        placeholder="选择关联项目"
                        option-filter-prop="children"
                    >
                      <a-select-option value="jack">
                        项目1
                      </a-select-option>
                      <a-select-option value="lucy">
                        项目2
                      </a-select-option>
                      <a-select-option value="tom">
                        项目3
                      </a-select-option>
                    </a-select>
                  </div>
                </div>
              </div>

            </div>


            <div class="filter-right">
              <div class="filter-search">
                <a-input-search placeholder="输入项目名称" />
              </div>
            </div>
          </div>

          <div class="table-wrap">
            <div class="table-header">
              <div class="font-wb">共计<span class="font-c-master margin-lr5">502</span>条数据</div>
            </div>
            <a-table :columns="columns" :data-source="data" bordered>
              <div slot="priority" slot-scope="priority">
                <a-tag
                    :color="priority === '高' ? 'volcano' : 'green'"
                >
                  {{ priority }}
                </a-tag>
              </div>

              <div slot="urgency" slot-scope="urgency">
                <a-tag
                    :color="urgency === '紧急' ? 'volcano' : 'green'"
                >
                  {{ urgency }}
                </a-tag>
              </div>

              <div slot="progress" slot-scope="progress">
                  <a-progress :percent="progress" />
              </div>

            </a-table>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "projectList",
  data(){
    return {
      filters1: [
        {
          title: '草稿',
          value: '1'
        },
        {
          title: '审批中',
          value: '2'
        },
        {
          title: '已确立',
          value: '3'
        },
        {
          title: '被驳回',
          value: '4'
        },
        {
          title: '进行中',
          value: '5'
        },
        {
          title: '已冻结',
          value: '6'
        },
        {
          title: '已终止',
          value: '7'
        },
        {
          title: '已结束',
          value: '8'
        },
        {
          title: '已归档',
          value: '9'
        }
      ],
      filters2: [
        {
          title: '类型1',
          value: '1'
        },
        {
          title: '类型2',
          value: '2'
        },
        {
          title: '类型3',
          value: '3'
        },
        {
          title: '类型4',
          value: '4'
        }
      ],
      columns: [
        {
          title: '项目名称',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
        },
        {
          title: '项目负责人',
          dataIndex: 'person',
          key: 'person',
          ellipsis: true,
        },
        {
          title: '优先级',
          dataIndex: 'priority',
          key: 'priority',
          scopedSlots: { customRender: 'priority' },
        },
        {
          title: '紧急程度',
          dataIndex: 'urgency',
          key: 'urgency',
          scopedSlots: { customRender: 'urgency' },
        },
        {
          title: '项目进度',
          dataIndex: 'progress',
          key: 'progress',
          scopedSlots: { customRender: 'progress' },
        },
        {
          title: '项目类型',
          dataIndex: 'type',
          key: 'type',
          ellipsis: true,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          ellipsis: true,
          sorter: (a, b) => a.date - b.date
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true
        },
      ],
      data: [
        {
          key: '1',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '2',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '低',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '3',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '不紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '4',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '5',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '6',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        }
      ]
    }
  },
  mounted(){

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
</style>
